<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=path%>"/>
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">
	function setDatePlugs(){
		$(".time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "bottom-left"
		});
		$(".time").prop("readOnly",true);
	}

	$(function(){
		setDatePlugs();
		$("#addBtn").click(function () {
			//设置日期控件
			setDatePlugs();
			//先要向后台发起请求，查出所有用户信息
			$.ajax({
				url:"setting/user/selectUsers.do",
				type:"get",
				dataType:"json",
				success:function (resp) {
					$.each(resp,function (i,user) {
						var selected="${sessionScope.loginUser.id}"==user.id?"selected":"";
						$("#create-owner").append("<option value='"+user.id+"'"+selected+">"+user.name+"</option>");
					})
				}
			})
			//x下拉框默认选中登录用户
			var id="${sessionScope.loginUser.id}";
			$("#create-owner").val(id);
			$("#createActivityModal").modal("show");
		})
		//添加操作
		$("#saveBtn").click(function () {
			//验证信息是否为空
			var owner=$.trim($("#create-owner").val());
			var name=$.trim($("#create-name").val());
			var startDate=$.trim($("#create-startDate").val());
			var endDate=$.trim($("#create-endDate").val());
			var cost=$.trim($("#create-cost").val());
			var description=$.trim($("#create-description").val());
			if (owner==""||name==""||startDate==""||endDate==""||cost==""||description==""){
				alert("表单信息不能为空");
				return;
			}
			$.ajax({
				url:"workbench/activity/add.do",
				type: "post",
				data: {
					"owner":owner,
					"name":name,
					"startDate":startDate,
					"endDate":endDate,
					"cost":cost,
					"description":description
				},
				dataType: "json",
				success:function (resp) {
					//从返回的消息判断是否添加成功
					if (resp.success==true){
						//添加成功，局部刷新展示列表,回到首页，用户设置每页展现记录条数保持不变
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
						//清空当前模态窗口
						$(".form-control").val("");
						//请求完毕之后，关闭模态窗口
						$("#createActivityModal").modal("hide");
					}else {
						alert(resp.msg);
					}
				}
			})
		})
		//点击查询按钮，进行条件分页查询
		$("#searchBtn").click(function () {
			//点击查询按钮的时候应该将搜索框中的信息保存到隐藏域中
			$("#hidden-name").val($.trim($("#search-name").val()));
			$("#hidden-owner").val($.trim($("#search-owner").val()));
			$("#hidden-startDate").val($.trim($("#search-startDate").val()));
			$("#hidden-endDate").val($.trim($("#search-endDate").val()));
			//跳转到记录所在页面，并保留用户记录条数设置
			pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
					,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
		})
		//页面加载完毕进行分页查询，回到第一页，保存用户设置的每页展现记录条数
		pageList(1,2);
		//全选和取消全选
		$("#allCheck").click(function () {
			$(".cbx").prop("checked",this.checked);
		})
		$("#dataBody").on("click",$(".cbx"),function () {
			$("#allCheck").prop("checked",$(".cbx").length==$(".cbx:checked").length);
		})
		//点击删除按钮，进行市场活动删除操作
		$("#deleteBtn").click(function () {
			//查看选中的记录条数进行删除或者批量删除
			if ($(".cbx:checked").length==0){
				alert("请选中需要删除的记录");
				return;
			}
			var data="";
			$.each($(".cbx:checked"),function (i,dom) {
				data+="id="+dom.value;
				if (i<$(".cbx:checked").length-1){
					data+="&";
				}
			})
			//询问是否要删除
			if (confirm("确定删除选中的记录吗")){
				//发起ajax请求
				$.ajax({
					url:"workbench/activity/delete.do",
					type:"post",
					data:data,
					dataType:"json",
					success:function (resp) {
						//返回的信息，成功或者失败
						if (resp.success){
							//删除成功，刷新列表，回到首页，保存用户记录条数设置
							pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
						}else {
							alert("删除失败");
						}
					}
				})
			}

		})
		//点击修改按钮进行市场活动的更新操作
		$("#editBtn").click(function () {
			//先判断选中的记录条数
			var length=$(".cbx:checked").length;
			if (length!=1){
				alert("请选中一条要修改的记录");
				return;
			}
			//设置日期控件
			setDatePlugs();
			//打开修改模态窗口界面
			$("#editActivityModal").modal("show");
			//发起ajax请求，在模态窗口界面展示记录信息
			//先查询需要修改的市场活动信息
			var id=$(".cbx:checked").val();
			var ownerId;
			$.ajax({
				url:"workbench/activity/selectById.do",
				type:"get",
				data:{"id":id},
				dataType:"json",
				success:function (resp) {
					//返回一个json对象，将数据写入模态窗口
					$("#edit-name").val(resp.name);
					$("#edit-startDate").val(resp.startDate);
					$("#edit-endDate").val(resp.endDate);
					$("#edit-cost").val(resp.cost);
					$("#edit-description").val(resp.description);
					$("#edit-id").val(resp.id);
					ownerId=resp.owner;
				}
			})
			//再查询用户信息,展现用户信息列表
			$.ajax({
				url:"setting/user/selectUsers.do",
				type:"get",
				dataType:"json",
				success:function (resp) {
					var html="";
					$.each(resp,function (i,user) {
						var selected=ownerId==user.id?"selected":"";
						html+="<option value='"+user.id+"'"+selected+">"+user.name+"</option>";
					})
					$("#edit-owner").html(html);
				}
			})

		})
		//点击更新按钮进行数据更新
		$("#updateBtn").click(function () {
			//向后台发起请求，更新数据，先进行非空验证
			//验证信息是否为空
			var owner=$.trim($("#edit-owner").val());
			var name=$.trim($("#edit-name").val());
			var startDate=$.trim($("#edit-startDate").val());
			var endDate=$.trim($("#edit-endDate").val());
			var cost=$.trim($("#edit-cost").val());
			var description=$.trim($("#edit-description").val());
			if (owner==""||name==""||startDate==""||endDate==""||cost==""||description==""){
				alert("表单信息不能为空");
				return;
			}
			//发起请求
			$.ajax({
				url:"workbench/activity/update.do",
				type:"post",
				data:{
					"id":$.trim($(".cbx:checked").val()),
					"owner":owner,
					"name":name,
					"startDate":startDate,
					"endDate":endDate,
					"cost":cost,
					"description":description
				},
				dataType:"json",
				success:function (resp) {
					//得到返回结果成功或者失败
					if (resp.success){
						//关闭模态窗口
						$("#editActivityModal").modal("hide");
						//更新成功刷新页面
						pageList(1,2);
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
					}else {
						//更新失败
						alert("数据更新失败")
					}
				}
			})

		})
	});
	//刷新列表，分页查询
	function pageList(pageNo,pageSize) {
		//将全选的复选框取消勾选
		$("#allCheck").prop("checked",false);
		//分页查询之前将隐藏域中的信息，重新赋予到搜索框中
		$("#search-name").val($.trim($("#hidden-name").val()));
		$("#search-owner").val($.trim($("#hidden-owner").val()));
		$("#search-startDate").val($.trim($("#hidden-startDate").val()));
		$("#search-endDate").val($.trim($("#hidden-endDate").val()));
		$.ajax({
			url:"workbench/activity/queryList.do",
			type:"get",
			dataType:"json",
			data: {
				"pageNo":pageNo,
				"pageSize":pageSize,
				"name":$.trim($("#search-name").val()),
				"owner":$.trim($("#search-owner").val()),
				"startDate":$.trim($("#search-startDate").val()),
				"endDate":$.trim($("#search-endDate").val())
				},
			success:function (resp) {
				var html="";
				$.each(resp.dataList,function (i,n) {
					//进行市场活动信息列表展现
					html+='<tr class="active">'
					html+='<td><input type="checkbox" class="cbx" value="'+n.id+'"/></td>'
					html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">'+n.name+'</a></td>'
					html+='<td>'+n.owner+'</td>'
					html+='<td>'+n.startDate+'</td>'
					html+='<td>'+n.endDate+'</td>'
					html+='</tr>'
				});
				$("#dataBody").html(html);
				//将pageSize写入隐藏域
				$("#hidden-pageSize").val(pageSize);
				//数据处理完毕后，结合分页插件，在前端展现分页相关信息
				var countPage=resp.title%pageSize==0?resp.title/pageSize:parseInt(resp.title/pageSize)+1;
				$("#activityPage").bs_pagination({
					currentPage: pageNo, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数,
					totalPages:countPage, // 总页数
					totalRows: resp.title, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					onChangePage : function(event, data){
						pageList(data.currentPage , data.rowsPerPage);
					}
				});
			}
		})
	}
</script>
</head>
<body>
	<!--隐藏域-->
	<input type="hidden" id="hidden-name"/>
	<input type="hidden" id="hidden-owner"/>
	<input type="hidden" id="hidden-startDate"/>
	<input type="hidden" id="hidden-endDate"/>
	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">
								</select>
							</div>
                            <label for="create-name" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startDate" readonly>
							</div>
							<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate" readonly>
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
						<%--隐藏域保存id内容--%>
						<input type="hidden" id="edit-id"/>
						<div class="form-group">
							<label for="edit-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner">

								</select>
							</div>
                            <label for="edit-name" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-name" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startDate" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-startDate">
							</div>
							<label for="edit-endDate" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-endDate">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description"></textarea>
							</div>
						</div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3 id="hTest">市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control time" type="text" id="search-startDate" readonly/>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control time" type="text" id="search-endDate" readonly/>
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="searchBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default"  id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="allCheck"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="dataBody">
						<%--<tr class="active">
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
							<td>2020-10-10</td>
							<td>2020-10-20</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>
                        </tr>--%>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="activityPage"></div>
			</div>
			
		</div>
		
	</div>
</body>
</html>